<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html" >
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        </script> 
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Social Full Fun</title>
                <link rel="shortcut icon" type="image/x-icon" href="http://#{initParam['DIRECCION_SERVIDOR']}/Iconos/icono.ico"/>
            </f:facet>
            <script type="text/javascript">$(document).ready(function(){iniciarDatos();});</script>
            <link href="http://#{initParam['DIRECCION_SERVIDOR']}/estilos/estilo-descripcionLocalSucursal/theme.css" rel="stylesheet" type="text/css"/>
        </h:head>

        <h:body>
            <p:layout  fullPage="true">
                <p:layoutUnit  position="center">
                    <h:form id="formularioID" binding="#{descripcionLocalSucursalControlador.formularioDescripcion}">
                        <p:remoteCommand name="iniciarDatos" update=":formularioID"/>
                        <table>
                            <tr>
                                <td>
                                    <p:graphicImage value="#{descripcionLocalSucursalDataManager.local.loImagen}" height="50px" width="50px"/>
                                </td>
                                <td>
                                    <center><h:outputText value="#{descripcionLocalSucursalDataManager.local.loDescripcion}" style="font-family: Segoe Script; color: #FF6600"/></center>
                                </td>
                            </tr>
                        </table>

                        <p:tabView id="tabDescripcionLocalSucursalID" style="size: 400px">
                            <p:ajax event="tabChange" listener="#{descripcionLocalSucursalControlador.onTabChange}" 
                                    update="tabDescripcionLocalSucursalID"/>

                            <p:tab id="tabHistoriaID" title="Historia">
                                <h:outputText value="#{descripcionLocalSucursalDataManager.local.loHistoria}" escape="false"/>
                            </p:tab>  
                            <p:tab  id="tabEventoID" title="Eventos">
                                <ui:include src="/principal/plantillaEventoLocalSucursal.xhtml" />
                            </p:tab> 
                            <p:tab  id="tabGoogleMapsID" title="Google Maps">
                                <h:outputLabel value="#{descripcionLocalSucursalDataManager.sucursal.suNombre}" style=" font-family:segoe script"/>
                                <br/>
                                <center><h:panelGrid columns="2" cellspacing="2">
                                        <h:outputText value="Ubícanos:" style="font-family:segoe script "/>
                                        <h:outputLabel value="#{descripcionLocalSucursalDataManager.sucursal.suTelefonoUno} / #{descripcionLocalSucursalDataManager.sucursal.suTelefonoDos}" style="font-family:segoe script "/>                                          
                                    </h:panelGrid></center>
                                <center style="float: bottom">
                                    <p:gmap center="#{descripcionLocalSucursalDataManager.sucursal.ubicacionCompleta}" 
                                            zoom="15" type="ROADMAP"  model="#{descripcionLocalSucursalControlador.simpleModel}" 
                                            style="width:475px;height:250px" />
                                    <h:panelGrid columns="2" cellspacing="2"> 
                                        <h:outputLabel value="#{descripcionLocalSucursalDataManager.sucursal.suDireccion}" style="font-family:segoe script"  />
                                    </h:panelGrid>
                                </center>
                            </p:tab> 
                            <p:tab id="tabMembresiaID" title="Membresía">
                                <p:outputPanel autoUpdate="true">
                                    <p:growl id="grow2" showDetail="true" sticky="true" />
                                    <center><h:outputText style="color: #CCCCCC"
                                                          value="Quiere ser socio y adquirir una membresía de #{membresiaDataManager.local.loNombre} 
                                                          la cual le permite acumular puntos para canjearlos por productos o servicios"/></center>
                                    <br/>
                                    <center>
                                        <h:graphicImage height="200px" width="200px" value="#{membresiaDataManager.local.loImagen}"/>
                                        <br/>
                                        <p:commandLink id="linkDesactivarMembresia" value="Desactivar Membresía" action="#{membresiaControlador.desactivarMembresia()}"
                                                       style="font-size: 10px" onclick="disable = true" update=":formularioID botonAceptarMembresia @this"
                                                       rendered="#{membresiaDataManager.banderaLink}"/>
                                    </center>
                                    <br/>
                                    <center><table cellspacing="2" style="float: bottom;">
                                            <tr>
                                                <td>
                                                    <h:outputText value="Si usted Acepta está aceptando los términos y condiciones:  "
                                                                  rendered="#{descripcionLocalSucursalDataManager.banderaAceptar and membresiaControlador.terminosYCondicionesCargados}"/>
                                                </td>
                                                <td>
                                                    <h:commandLink value="Leer" target="_blank"
                                                                   immediate="true" 
                                                                   rendered="#{descripcionLocalSucursalDataManager.banderaAceptar and membresiaControlador.terminosYCondicionesCargados}">
                                                        <p:fileDownload value="#{membresiaControlador.archivoDescargaTerminosYCondiciones}"
                                                                        contentDisposition="inline"/>
                                                    </h:commandLink>
                                                </td>
                                            </tr>
                                        </table></center>
                                    <center><table cellspacing="2" style="float: bottom;">
                                            <tr>
                                                <td>
                                                    <p:commandButton id="botonAceptarMembresia" value="Aceptar" action="#{membresiaControlador.registrarMembresia()}"
                                                                     onclick="disabled = true" update=":formularioID linkDesactivarMembresia @this"
                                                                     rendered="#{membresiaDataManager.banderaAceptar}"/>
                                                </td>
                                                <td>
                                                    <p:commandButton value="Salir" onclick="top.close()"/>
                                                </td>
                                            </tr>
                                        </table></center>
                                    <br/>
                                    <p:blockUI block=":formularioID" trigger="botonAceptarMembresia"  >
                                        Registrando Membresía...<br /> 
                                    </p:blockUI>
                                    <p:blockUI block=":formularioID" trigger="linkDesactivarMembresia"  >
                                        Desactivando Membresía...<br /> 
                                    </p:blockUI>
                                </p:outputPanel>
                            </p:tab> 
                            <p:tab id="tabFotosID" title="Fotos">
                                <center>
                                    <table>
                                        <tr>
                                            <td>
                                                <h:graphicImage  height="160px" width="200px" value="#{descripcionLocalSucursalDataManager.localesImagen[0].loImRutaFoto}"
                                                                 rendered="#{descripcionLocalSucursalDataManager.referenciaAImagenes}"
                                                                 onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=200;this.height=160"/>
                                                <p:graphicImage  title="1 click para ampliar la foto, 2 clicks para regresarla al tamaño normal" height="160px" width="200px" value="#{descripcionLocalSucursalDataManager.imagenUno}" cache="false" 
                                                                 rendered="#{!descripcionLocalSucursalDataManager.referenciaAImagenes}"
                                                                 onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=200;this.height=160"/>
                                            </td>
                                            <td>
                                                <h:graphicImage height="160px" width="200px" value="#{descripcionLocalSucursalDataManager.localesImagen[1].loImRutaFoto}"
                                                                rendered="#{descripcionLocalSucursalDataManager.referenciaAImagenes}"
                                                                onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=200;this.height=160"/>
                                                <p:graphicImage  height="160px" width="200px" value="#{descripcionLocalSucursalDataManager.imagenDos}" cache="false"
                                                                 rendered="#{!descripcionLocalSucursalDataManager.referenciaAImagenes}"
                                                                 onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=200;this.height=160"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:graphicImage height="160px" width="200px" value="#{descripcionLocalSucursalDataManager.localesImagen[2].loImRutaFoto}"
                                                                rendered="#{descripcionLocalSucursalDataManager.referenciaAImagenes}"
                                                                onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=200;this.height=160"/>
                                                <p:graphicImage  height="160px" width="200px" value="#{descripcionLocalSucursalDataManager.imagenTres}" cache="false"
                                                                 rendered="#{!descripcionLocalSucursalDataManager.referenciaAImagenes}"
                                                                 onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=200;this.height=160"/>
                                            </td>
                                            <td>
                                                <h:graphicImage height="160px" width="200px" value="#{descripcionLocalSucursalDataManager.localesImagen[3].loImRutaFoto}"
                                                                rendered="#{descripcionLocalSucursalDataManager.referenciaAImagenes}"
                                                                onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=200;this.height=160"/>
                                                <p:graphicImage  height="160px" width="200px" value="#{descripcionLocalSucursalDataManager.imagenCuatro}" cache="false"
                                                                 rendered="#{!descripcionLocalSucursalDataManager.referenciaAImagenes}"
                                                                 onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=200;this.height=160"/>
                                            </td>
                                        </tr>
                                    </table>
                                    <br/>
                                </center>
                            </p:tab> 
                            <p:tab id="tabHorariosID" title="Horarios">
                                <center>
                                    <h:panelGrid columns="4" cellspacing="5">
                                        <h:outputText value="Atendemos de: "/>
                                        <h:outputText 
                                            value="#{descripcionLocalSucursalDataManager.sucursal.diasAtencion}"/>
                                        <h:outputText 
                                            value=" de #{descripcionLocalSucursalDataManager.sucursal.suHorarioDesde} a #{descripcionLocalSucursalDataManager.sucursal.suHorarioHasta}"/>
                                    </h:panelGrid>
                                </center>
                            </p:tab>
                            <p:tab title="Formas de Pago" id="tabFormasDePagoID">
                                <center><table>
                                        <tr>
                                            <td>
                                                <p:outputPanel>
                                                    <h:panelGrid columns="2" cellpadding="5">
                                                        <f:facet name="header" >
                                                            ACEPTAMOS
                                                        </f:facet>
                                                        <center><p:dataTable value="#{descripcionLocalSucursalDataManager.listaTarjetasAceptadas}" 
                                                                             id="tablaFormasDePagoID"
                                                                             var="formasDePago"
                                                                             emptyMessage="No existen diferentes formas de pago">
                                                                <p:column id="columnaImagenFPagosID" headerText="Imagen" >
                                                                    <h:graphicImage id="imagenCargadaFPagosID" value="#{formasDePago.fpCodigo.fpImagen}" width="75" height="75" />
                                                                </p:column>
                                                                <p:column id="columnaNombreFPagosID" headerText="Nombre">
                                                                    <h:outputLabel value="#{formasDePago.fpCodigo.fpNombre}"/>                                 
                                                                </p:column>                                          
                                                            </p:dataTable></center>    
                                                    </h:panelGrid>
                                                </p:outputPanel>
                                            </td>
                                        </tr>
                                    </table></center>
                            </p:tab>
                            <p:tab id="tabVideoID" title="Video">
                                <center>
                                    <p:media value="#{descripcionLocalSucursalDataManager.local.loVideo}"
                                             width="400" height="350"  player="flash"/>           
                                </center>
                            </p:tab>
                        </p:tabView>
                    </h:form>
                </p:layoutUnit>
            </p:layout>
        </h:body>
    </f:view>
</html>